<template>
    <div class="footer">
        <button @click="del">清空数据</button>
        <div>
            <span>{{index}}</span>
            <span>/</span>
            <span>{{arrLength}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        props:["arrLength"],
        data(){
            return{
                index:1,
            };
        },
        mounted(){
            this.$eventBus.$on("itemIndex",(index)=>{
                this.index=index;
            });
        },
        methods:{
            del(){
                this.$eventBus.$emit("emptyArr");
            },
        },
        watch:{
            arrLength(){
                if(this.arrLength==0){
                    this.index=0;
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .footer{
        display: flex;
        justify-content: space-between;
        width: 1300px;
        margin: 0 auto;
    }
</style>